<component
  :is="dialogType"
  :value="showDialog"
  @input="close"
  max-width="60%"
>
  <v-toolbar color="grey lighten-4" flat>
    <v-toolbar-title>Save Screenshot</v-toolbar-title>
  </v-toolbar>
  <v-card
    flat
    v-if="screenshot"
  >
    <v-container>
      <v-layout row wrap>
        <v-flex v-bind="flexLayout">
          <v-card flat tile>
            <v-card-media
              :class="$style.imagePreview"
              :src="imageUrl"
              contain
              :height="smallScreen ? '125px' : '250px'"
            />
          </v-card>
        </v-flex>
        <v-flex v-bind="flexLayout">
          <v-container
            :class="{ 'pa-1': smallScreen }"
          >
            <v-layout row>
              <v-flex xs8>
                <v-text-field
                  v-model="filename"
                  label="Filename"
                  v-on:keyup.enter="save(); close()"
                />
              </v-flex>
              <v-flex xs4>
                <v-select
                  label="File type"
                  hide-details
                  single-line
                  v-model="fileType"
                  :items="fileTypes"
                />
              </v-flex>
            </v-layout>
            <v-layout row>
              <v-flex xs12>
                <v-checkbox
                  label="Transparent background"
                  v-model="transparentBackground"
                />
              </v-flex>
            </v-layout>
          </v-container>
        </v-flex>
      </v-layout>
    </v-container>
    <v-card-actions>
      <v-spacer />
      <v-btn
        flat
        color="red"
        @click.native="close"
      >
        <span>Cancel</span>
      </v-btn>
      <v-btn
        color="secondary"
        @click.native="save(); close()"
      >
        <span>Save</span>
      </v-btn>
      <v-btn
        color="primary"
        :href="imageUrl"
        :download="filename + fileType"
        @click.native="close"
      >
        <span>Download</span>
      </v-btn>
    </v-card-actions>
  </v-card>
</component>
